<template>
  <div class="mode-roles">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>供应商模式管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form>
        <el-form-item>
          <el-table class="easy-table"
            :data="modeList"
            max-height="550">
            <el-table-column prop="id"
              width="50"
              label="编号">
            </el-table-column>
            <el-table-column prop="name"
              width="200"
              label="合作模式">
            </el-table-column>

            <el-table-column prop="description"
              label="描述">
            </el-table-column>
            <el-table-column label="操作"
              width="300">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="configRole(scope.row.id)">权限配置</el-button>
                <el-button type="text"
                  size="small"
                  @click="edit(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!-- 编辑 -->
      <el-dialog title="模式编辑"
        :visible.sync="dialogVisible"
        @close="reset('ruleForm')"
        width="550px">
        <el-form label-width="80px"
          ref="ruleForm"
          :rules="rules"
          :model="mode">
          <el-form-item label="供应商合作模式名称"
            prop="name">
            <el-input placeholder="请输入供应商合作模式名称"
              clearable
              maxlength="20"
              v-model="mode.name"></el-input>
          </el-form-item>
          <el-form-item label="供应商合作模式描述">
            <el-input type="textarea"
              placeholder="请输入供应商合作模式描述"
              :autosize="{ minRows: 8, maxRows: 4}"
              maxlength="200"
              v-model="mode.description"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer"
          class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
            @click="sure('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 权限配置 -->
      <el-dialog title="权限配置"
        :visible.sync="rolesVisible"
        width="1000px">
        <div class="mode-body">
          <div class="warpper"
            v-for="(item, index) in roleAuthorization"
            :key="index">
            <div class="warpper-left">
              <el-checkbox :label="item.funcName"
                name="type"
                v-model="item.selected"
                @change="selectedAll(item.selected, index)"><span style="font-weight:bold">{{item.funcName}}</span></el-checkbox>
            </div>
            <div class="warpper-right">
              <span v-for="(value, row) in item.children"
                :key="row">
                <el-checkbox :label="value.funcName" v-model="value.selected"
                    @change="childrenSelectAll(value.selected, index, row)"
                  name="type"></el-checkbox>
              </span>
            </div>
          </div>
        </div>
        <span slot="footer"
          class="dialog-footer">
          <el-button @click="rolesVisible = false">取 消</el-button>
          <el-button type="primary"
            @click="saveSetting">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getModeList, updateMode } from "@/public/js/mode";
import {
  getRoleTheFunclist,
  setModeRoleFun,
  getModeRoleFunlist
} from "@/public/js/setting";
export default {
  components: {},
  props: {},
  data() {
    return {
      modeList: [],
      title: "",
      dialogVisible: false,
      rolesVisible: false,
      roleId: "",
      roleAuthorization: [],
      funcList: [],
      mode: {},
      rules: {
        name: [{ required: true, message: "请输入模式名称", trigger: "blur" }]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    _getModeList() {
      getModeList().then(res => {
        this.modeList = res.data.modes;
      });
    },
    //获取权限列表
    _getModeRoleFunlist() {
      getModeRoleFunlist({
        roleId: this.roleId
      }).then(res => {
        console.log(res);
        this.roleAuthorization = res.data.roleFuncEntities;
      });
    },
    //编辑
    edit(mode) {
      this.mode = { ...mode };
      this.dialogVisible = true;
    },
    setPermissionsList() {
      this.funcList = [];
      this.roleAuthorization.forEach(item => {
        if (item.selected) {
          this.funcList.push(item.id);
        }
        item.children.forEach(value => {
          if (value.selected) {
            this.funcList.push(value.id);
          }
          value.children.forEach(child => {
            if (child.selected) {
              this.funcList.push(child.id);
            }
          });
        });
      });
    },
    //权限配置
    configRole(id) {
      this.roleId = id;
      this._getModeRoleFunlist();
      this.rolesVisible = true;
    },
    //权限配置保存
    saveSetting() {
      this.setPermissionsList();
      let _data = {
        roleId: this.roleId,
        menuList: this.funcList
      };
      setModeRoleFun(_data).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success("保存成功");
          this.rolesVisible = false;
        }
      });
    },
    //编辑保存
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let { id, name, description } = this.mode;
          updateMode({ id, name, description }).then(res => {
            if (!res.data.errCode) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this._getModeList();
              this.dialogVisible = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    selectedAll(val, index) {
     
      this.roleAuthorization[index].children.forEach(item => {
        item.selected = val;
        item.children.forEach(value => {
          value.selected = val;
        });
      });
    },
    childrenSelectAll(val, index, row) {
      this.roleAuthorization[index].children[row].children.forEach(item => {
        item.selected = val;
      });
      if (val) {
        this.roleAuthorization[index].selected = val;
      } else {
        let flag = false;
        this.roleAuthorization[index].children.forEach(e => {
          if (e.selected) {
            flag = true;
          }
        });
        if (!flag) {
          this.roleAuthorization[index].selected = val;
        }
      }
    }
  },
  created() {
    this._getModeList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.mode-roles {
  .mode-body {
    padding: 15px;
    background: #f2f2f2;
    .warpper {
      display: flex;
      padding: 10px 0px;
      border-bottom: 1px solid #ddd;

      &:last-child {
        padding-bottom: 0px;
        border-bottom:0px;
      }
      .warpper-left {
        width: 150px;
      }
      .warpper-right {
        flex: 1;
        & > span {
          display: inline-block;
          width: 160px;
        }
      }
    }
  }
}
</style>